<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保存诗词</title>
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <script src="/js/jquery/jquery-3.4.1.js"></script>
    <script src="/js/service/common.js"></script>
    <script>
        function save() {
            $.ajax({
                url: "/author/saveAuthor",
                type: "POST",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify({
                    id: [[${res}]],
                    author: $("#author").val(),
                    gender: $("input[name=gender]:checked").val(),
                    zi: $("#zi").val(),
                    hao: $("#hao").val(),
                    dynasty: $("#dynasty").val(),
                    address: $("#address").val(),
                }),
                success: function (json) {
                    if(json.code === 200){
                        alert("保存成功！！！");
                        window.location.href="/page/service/author/authorList";
                    }else{
                        tipsMessage(json);
                    }
                },
                error: function () {
                    alert("提交失败");
                }
            });
        }
        window.onload = () => {
            defaultBackPage();
            initCode(30, $("#dynasty"), true, '', detail);

        };
        function detail() {
            let authorId = [[${res}]];
            if(authorId){
                $.ajax({
                    url: `/author/selectById/${authorId}`,
                    type: "GET",
                    dataType: "json",
                    success: function (json) {
                        if(json.code === 200){
                            let author = json.data;
                            $("#author").val(author.author);
                            let gender = author.gender;
                            if(gender === 1001){
                                $("#boy").attr("checked", true);
                            }else if(gender === 1002){
                                $("#girl").attr("checked", true);
                            }else{
                                $("#unknown").attr("checked", true);
                            }
                            $("#zi").val(author.zi);
                            $("#hao").val(author.hao);
                            $(`#dynasty option[value=${author.dynasty}]`).attr('selected',true);
                            $("#address").val(author.address);
                        }else{
                            tipsMessage(json);
                        }
                    }
                })
            }
        }
    </script>
</head>
<body>
    <object class="object-top" data="/page/common/top"></object>
    <div class="center-div">
    <h1>保存作者</h1>
    <form id="form" style="margin-top: 4%">
        <label>姓名</label>
        <label>
            <input style="width: 19.4%" placeholder="请输入姓名" type="text" id="author"/>
        </label><br>
        <label>性别</label>
        <label>
            <input id="boy" name="gender" type="radio" value="1001" checked/>男
            <input id="girl" name="gender" type="radio" value="1002"/>女
            <input id="unknown" name="gender" type="radio" value="1003"/>未知
        </label><br>
        <label>&nbsp;字&nbsp;&nbsp;</label>
        <label>
            <input style="width: 19.4%" placeholder="请输入字"type="text" id="zi"/>
        </label><br>
        <label>&nbsp;号&nbsp;&nbsp;</label>
        <label>
            <input style="width: 19.4%" placeholder="请输入号" type="text" id="hao"/>
        </label><br>
        <label>住址</label>
        <label>
            <input style="width: 19.4%" placeholder="请输入住址" type="text" id="address"/>
        </label><br>
        <label>朝代</label>
        <label>
            <select id="dynasty" style="width: 20%">
            </select>
        </label><br>
        <label><input type="button" class="btn" value="确定" onclick="save()"></label>
        <label><input type="reset" class="btn" value="重置"></label>
    </form>
</div>
</body>
</html>